<extend name="Public/base" />

<block name="body">
    <!-- 标题栏 -->
    <div class="main-title">
        <h2>{$meta_title}</h2>
    </div>
    <a class="btn item_add" href="{:U('Store/addSlide?type='.$type)}">新 增</a>

    <div class="cf"><span class="text-cancel">（幻灯片可拖动排序）</span></div>

    <!-- 数据列表 -->
    <div class="data-table table-striped">
        <table class="">
            <thead>
            <tr>
                <th>幻灯片</th>
                <th>跳转url</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="sortable">
            <notempty name="lists">
                <volist name="lists" id="vo">
                    <tr class="status_trclass_1 J_tr" data-id="{$vo['slide']}" data-url="{$vo['url']}">
                        <td><img src="{:get_image_thumb(get_cover($vo['slide'],'path'), 300, 120)}" /></td>
                        <td>{$vo.slide_url|default='暂无'}</td>
                        <td>
                            <a href="{:U('editSlide?id='.$vo['id'].'&type='.$type)}">[编辑]</a>
                            <a href="{:U('setStatus?id='.$vo['id'].'&type='.$type)}">[删除]</a>
                        </td>
                    </tr>
                </volist>
                <else/>
                <td colspan="10" class="text-center"> aOh! 暂时还没有内容! </td>
            </notempty>
            </tbody>
        </table>
    </div>
    <div class="page">
        {$_page}
    </div>
</block>

<block name="script">
    <script type="text/javascript" src="__JS__/jquery-ui/jquery-ui.min.js"></script>
    <script type="text/javascript" charset="utf-8">
        //导航高亮
       // highlight_subnav('{:U("Store/nav")}');

        // JavaScript Document
        $(function(){
            $( "#sortable" ).sortable({
                opacity: 0.6, //设置拖动时候的透明度
                revert: true, //缓冲效果
                cursor: 'move', //拖动的时候鼠标样式
                update: function(){
                    var new_order = [];
                    var new_url = [];
                    $( "#sortable" ).children(".J_tr").each(function() {
                        var id = $(this).attr('data-id');
                        var url = $(this).attr('data-url');
                        new_order.push(id);
                        new_url.push(url);
                    });
                    var newId = new_order.join(',');
                    var newUrl = new_url.join(',');
                    $.ajax({
                        type: "post",
                        url: "{:U('slideOrder')}", //服务端处理程序
                        data: { id: newId, url: newUrl },   //id:新的排列对应的ID,order：原排列顺序
                        beforeSend: function() {
                            console.log('正在加载');
                        },
                        success: function(msg) {
                            //alert(msg);
                            console.log('修改成功');
                        }
                    });
                }
            });

        });
    </script>
</block>
